<template>
	<view class="second-home">
		<view class="covor-btn" :class="{'covor-btn-right':scrollData.isScrolling}">
			<image @click="shareApp" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-88.png"
				mode="widthFix">
			</image>
			<text @click="shareApp">分享</text>
			<!-- #ifdef MP-WEIXIN -->
			<button class="share" open-type="share">分享</button>
			<!-- #endif -->

			<view class="line"></view>
			<image @click="handleContact(getStudio.detail.phone)"
				src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-133.png" mode="widthFix">
			</image>
			<text @click="handleContact(getStudio.detail.phone)">电话咨询</text>
			<view class="line"></view>
			<template v-if="bankSwitch">
				<image @click="onlineConsultation"
					src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-134.png" mode="widthFix">
				</image>
				<text @click="onlineConsultation">在线咨询</text>
				<view class="line"></view>
			</template>
			<image @click="toYuyue" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-135.png"
				mode="widthFix">
			</image>
			<text @click="toYuyue">预约下单</text>
		</view>
		<scroll-view :style="{height:scrollHeight}" :refresher-enabled="true" :refresher-threshold="100"
			refresher-background="#F9F6F6" :scroll-into-view="scrollData.scrollId" :refresher-triggered="triggered"
			:scroll-with-animation="true" scroll-y="true" class="scroll-Y" @scroll="scrollData.scrollFun"
			@refresherrefresh="onRefresh">
			<view>
				<view class="home-top" :style="{ height: `${!getHomeBanner.heightChange ? '682rpx' : '370rpx'}` }">
					<skeletons :loading="getStudio.loading" :rowsHeight="['562rpx']" :bgColor="true">
						<swiper :style="{ height: `${!getHomeBanner.heightChange ? '562rpx' : '250rpx'}` }"
							class="home-swiper-box" circular :indicator-dots="false" :autoplay="true" :interval="3000"
							:duration="500">
							<swiper-item v-for="(item, index) in getStudio.banner" :key="`homeTop${index}`">
								<view class="item-img-box"
									:style="{ height: `${!getHomeBanner.heightChange ? '562rpx' : '250rpx'}` }">
									<image :src="item.picUrl" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
					</skeletons>

					<view class="home-info">
						<skeletons :loading="getStudio.loading" :rows="4" :avatar="true" :bgColor="true"
							:rowsWidth="['300rpx', '60%', '100%', '30%']" avatarShape="square" avatarSize="120rpx">
							<view class="home-info-user" @click="getStudio.workspace">
								<image class="avatar" :src="getStudio.detail.avatar" mode="aspectFill"></image>
								<view class="user-info">
									<view class="name">{{ getStudio.detail.name }}</view>
									<view class="tags">
										<image @click.stop="getStudio.isDetails?getStudio.tipsToPage():''"
											v-for="(i, index) in getStudio.tips" :key="`homeInfo${index}`" class="tag"
											:src="i" mode="heightFix"></image>
									</view>
								</view>
							</view>
							<view class="tips">
								<view @click="detailRef.open()" class="xjs-line-two">
									{{ getStudio.detail.introduce }}
								</view>
							</view>
						</skeletons>
					</view>
				</view>

				<view class="home-tab">
					<view class="tab-container">
						<view v-for="(item, index) in tab.list" :key="`homeTab${index}`"
							@click="tab.change(item, index)" class="tab-item active">
							<text :class="{ 'active-text': item.id == tab.current }">{{ item.name }}</text>
							<view class="line" :class="{ 'active-line': item.id == tab.current }">
								<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-101.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>


				<view id="service">
					<view class="tab-sevice">
						<view v-if="getStudioService.list != 0" class="service-list">
							<view v-for="(item, index) in getStudioService.list" :key="`tabSevice${index}`"
								@click="getStudioService.toPaymentOrder(item.id)" class="service-item">
								<image class="service-img" :src="item.thumPic" mode="aspectFill"></image>
								<view class="service-info">
									<view class="service-title">{{ item.name }}</view>
									<view class="service-desc xjs-line-two">{{ item.description }}</view>
									<view class="service-price">
										<text class="price">¥{{ item.minPrice }}起/次</text>
										<view class="service-btn xjs-btn-primary">去下单</view>
									</view>
								</view>
							</view>
						</view>
						<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无服务" />
						<image class="jiazheng"
							src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-151.png"
							mode="widthFix">
						</image>
					</view>
				</view>

				<view id="pet">
					<view class="title-header">
						<view class="title">
							<text>陪宠师团队</text>
							<text v-if="getPet.number" class="count">({{ getPet.number }})</text>
						</view>
						<view @click="getPet.toTeam" class="view-all">
							查看全部
							<uni-icons color="" type="right" size="13"></uni-icons>
						</view>
					</view>
					<view class="tab-pcs">
						<view class="pcs-banner">
							<image @click="getPet.tojoin" :src="getPet.banner" mode="widthFix" class="banner-img">
							</image>
						</view>

						<view v-if="getPet.list.length != 0" class="pcs-list">
							<view v-for="(item, index) in getPet.list" :key="`tabPcs${index}`"
								@tap="getPet.toDailyServiceIndex(item.userId)" class="pcs-item">
								<image :src="item.user.avatar" mode="aspectFill" class="pcs-avatar"></image>
								<view class="pcs-name xjs-line-one">{{ item.user.nickName }}</view>
								<view class="pcs-desc xjs-line-two">{{ item.user.petsitterIntroduce }}</view>
							</view>
						</view>
						<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无陪宠师" />
					</view>
				</view>


				<view id="daily">
					<view class="title-header scroll-03">
						<view class="title">
							<text>服务日常</text>
							<text v-if="getServiceDay.number" class="count">({{ getServiceDay.number }})</text>
						</view>
						<view @click="getServiceDay.toDailyService" class="view-all">
							查看全部
							<uni-icons color="" type="right" size="13"></uni-icons>
						</view>
					</view>
					<view class="tab-daily">
						<template v-if="getServiceDay.list.length != 0">
							<swiper class="swiper" next-margin="270rpx" circular :indicator-dots="false"
								:autoplay="true" :interval="3000" :duration="500" @change="getServiceDay.change">
								<swiper-item v-for="(item, index) in getServiceDay.list" :key="`tabDaily${index}`">
									<view @tap="getServiceDay.toDailyServiceDetail(item.id,item.petsitterNickName)"
										class="swiper-item">
										<image class="daily-img" :src="item.coverPic.split(',')[0]" mode=""></image>
										<view class="daily-intro">
											<view class="xjs-line-two">{{ item.content }}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="dots-content">
								<view :class="['dots-item', getServiceDay.current == index ? 'dots-item-active' : '']"
									v-for="(item, index) in getServiceDay.list" :key="`lists-${index}`"></view>
							</view>
						</template>
						<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无服务日常" />
					</view>
				</view>


				<view id="comment">
					<view class="title-header scroll-04">
						<view class="title">
							<text>服务评价</text>
							<text v-if="getComment.number" class="count">({{ getComment.number }})</text>
						</view>
						<view v-if="getComment.number" @click="getComment.toEvaluate" class="view-all">
							查看全部
							<uni-icons color="" type="right" size="13"></uni-icons>
						</view>
					</view>
					<view class="tab-comment">
						<view v-if="getComment.list.length != 0" v-for="(item, index) in getComment.list"
							:key="`tabComment${index}`" class="comment-card">
							<view class="comment-header">
								<view class="user-info">
									<image class="avatar"
										:src="item.ifAnonymous ? item.userAvatar : 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-15.png'"
										mode="aspectFill"></image>
									<view>
										<view class="user-name xjs-line-one">{{ item.nickName }}</view>
										<view class="rating">
											<image v-for="(i, index) in item.comprehensiveEvaluation"
												:key="`evaluation${index}`" class="star"
												src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-89.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>
								<view class="comment-date">{{ item.createTime.split(' ')[0] }}</view>
							</view>
							<view class="comment-content">
								<view class="service-info">项目：{{ item.goodsName }} | 服务：{{ item.petsitterNickName }}
								</view>
								<view class="comment-text">{{ item.content }}</view>
							</view>
						</view>
						<loadMore v-else status="empty" size="small" marginTop="50rpx" text="暂无评价" />
					</view>
				</view>

				<view style="height: 32rpx;"></view>
			</view>
		</scroll-view>
	</view>
	<uni-popup ref="detailRef" type="bottom" background-color="#fff" border-radius="32rpx 32rpx 0 0">
		<view class="popup-content">
			<view class="popup-title">
				<text>介绍</text>
				<text class="close-icon" @click="detailRef.close()">×</text>
			</view>
			<view class="html">{{ getStudio.detail.introduce }}</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import api from '@/api';
	import configs from '@/config';
	import { onShareAppMessage } from '@dcloudio/uni-app';
	import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue';
	import { accredit } from '@/hooks/useAppPermission/index';
	import { useUserStoreToRefs } from '@/store/useUserStore';
	const { userInfo } = useUserStoreToRefs();

	import { useConfigStore, useConfigStoreToRefs } from '@/store/useConfigStore'
	const { setAppConfig } = useConfigStore()
	const { bankSwitch } = useConfigStoreToRefs()
	const props = withDefaults(
		defineProps<{
			scrollHeight ?: any
		}>(),
		{
			scrollHeight: ""
		}
	)
	const triggered = ref(false)
	const onRefresh = async () => {
		if (triggered.value) {
			return
		}
		triggered.value = true
		init()
		// setTimeout(() => {
		// 	triggered.value = false
		// }, 1000)
	}
	onMounted(() => {
		init()
	});
	// 顶部详情
	const detailRef = ref();
	const init = async () => {
		setAppConfig()
		await getHomeBanner.getHomeBanner();

		await getStudio.getUserStudio();
		await getStudio.getStudioDetail();
		await getStudioService.getList();
		await getPet.getList();
		await getServiceDay.getList();
		await getComment.getList();
		triggered.value = false
	}

	const instance = getCurrentInstance();
	const scrollData = reactive({
		isScrolling: false,
		timer: null,
		scrollId: "",
		scrollFun: (e) => {
			scrollData.isScrolling = true
			if (scrollData.timer) {
				clearTimeout(scrollData.timer)
			}
			scrollData.timer = setTimeout(() => {
				scrollData.isScrolling = false
				scrollData.getViewTop(0,0)
			}, 300)		
		},
		getViewTop: (num,select) => {
			// 为真表示通过点击实现的滚动,则不执行
			if(tab.isChanging){
				return
			}
			let arr = ['service','pet','daily','comment']
			if (num >= 4) {
				tab.current = select+1
				tab.isChanging = false
				return;
			}
			let query = uni.createSelectorQuery().in(instance);
			query
				.select(`#${arr[num]}`)
				.boundingClientRect((data : any) => {
					var px = uni.upx2px(116);
					if(data.top<=px){
						select = num
					}
					num++;
					scrollData.getViewTop(num,select)
				})
				.exec();
		}
	})
	const getHomeBanner = reactive<any>({
		heightChange: false,
		getHomeBanner: () => {
			setTimeout(() => {
				getHomeBanner.heightChange = true;
			}, 10000);
		}
	});
	const getStudio = reactive<any>({
		studioId: '',
		userStudioId: '',
		banner: [],
		tips: [],
		loading: false,
		detail: {},
		isDetails: 0,
		workspace: () => {
			uni.navigateTo({
				url: `/pages/studio/indexDetails/index?studioId=${getStudio.studioId}`
			});
		},
		getUserStudio: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/studio/getUserStudioId`
			});
			getStudio.studioId = res.data;
			getStudio.userStudioId = res.data || '';
		},
		getStudioDetail: async () => {
			if (!getStudio.detail.name) {
				//骨架屏第一次没数据的时候显示，后续存在数据的时候不显示骨架屏
				getStudio.loading = true;
			}
			// const locat: any = await getLocation();
			const locat = {
				longitude: "114.3215",
				latitude: "30.5674"
			}
			const res : any = await api({
				method: 'get',
				url: `/mall/studio/getStudioDetail/${getStudio.studioId}`,
				data: {
					longitudes: locat.longitude,
					latitudes: locat.latitude
				}
			});
			console.log('res.data.picJson', res.data.picJson)
			if (res.data.picJson && JSON.parse(res.data.picJson).length > 0) {
				getStudio.banner = JSON.parse(res.data.picJson);
			} else {
				getStudio.banner = [{
					picUrl: "https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/home-banner-default.png"
				}]
			}
			getStudio.detail = res.data;
			const res2 : any = await api({
				method: 'get',
				url: `/mall/content/home-page-config/list`
			});
			console.log(res2.data);
			if (res2.data.length > 0) {
				res2.data.forEach((item) => {
					if (item.type == 4 && item.areaPic) {
						getStudio.tips = item.areaPic.split(',');
						getStudio.isDetails = item.isDetails
					}
				});
			}
			getStudio.loading = false;
		},
		tipsToPage: () => {
			uni.navigateTo({
				url: '/pages/studio/certificationDetails/index'
			});
		}
	});

	const tab = reactive<any>({
		current: 1,
		list: [
			{
				name: '服务',
				type: 'service',
				id: 1
			},
			{
				name: '陪宠师',
				type: 'pet',
				id: 2
			},
			{
				name: '日常',
				type: 'daily',
				id: 3
			},
			{
				name: '评价',
				type: 'comment',
				id: 4
			}
		],
		isChanging: false,
		change: (item, index) => {
			tab.isChanging = true;
			tab.current = item.id;
			scrollData.scrollId = ""
			setTimeout(()=>{
				scrollData.scrollId = item.type
			},100)
		}
	});
	//获取服务列表
	const getStudioService = reactive<any>({
		list: [],
		//去下单
		toPaymentOrder: (id : string) => {
			uni.navigateTo({
				url: `/pages/serviceDetails/details/index?studioGoodsId=${id}&studioId=${getStudio.studioId}`
			});
		},
		getList: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/goods/goods/list`,
				data: { userId: '' }
			});
			if (res) {
				getStudioService.list = res.data;
			}
		}
	});
	//获取陪宠师
	const getPet = reactive<any>({
		number: 0,
		banner: '',
		list: [],
		tojoin: () => {
			uni.navigateTo({
				url: '/pages/applyPetTeacher/index/index'
			});
		},
		getBanner: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/content/backend-configs/getHomeConfig`
			});
			getPet.banner = res.data['xjs.content.contentConfig.recruitShareBanner'];
		},
		getNumber: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/studio/petsitter-team/getAllCount`,
				data: {
					studioId: getStudio.studioId
				}
			});
			getPet.number = res.data.teamCount || 0;
			getServiceDay.number = res.data.serviceDailyCount || 0;
		},
		getList: async () => {
			await getPet.getBanner();
			await getPet.getNumber();
			const res : any = await api({
				method: 'get',
				url: `/mall/studio/petsitter-team/homePage`,
				data: {
					studioId: getStudio.studioId
				}
			});
			getPet.list = res.data;
		},
		toDailyServiceIndex: (id : string) => {
			uni.navigateTo({
				url: `/pages/studio/petCompanionTeacherIndex/index?userId=${id}&studioId=${getStudio.studioId}`
			});
		},
		toTeam: () => {
			uni.navigateTo({
				url: `/pages/studio/team/index?studioGoodsId=${getStudio.studioId}`
			});
		}
	});

	//获取服务日常
	const getServiceDay = reactive<any>({
		number: 0,
		list: [],
		current: 0,
		getList: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/order-service-daily/homePage`,
				data: {
					studioId: getStudio.studioId
				}
			});
			getServiceDay.list = res.data;
		},
		toDailyServiceDetail: (id : string, petsitterNickName : string) => {
			uni.navigateTo({
				url: `/pages/studio/dailyServiceDetail/index?id=${id}&petsitterNickName=${petsitterNickName}`
			});
		},
		toDailyService: () => {
			uni.navigateTo({
				url: `/pages/studio/dailyService/index?studioGoodsId=${getStudio.studioId}`
			});
		},
		change: (event) => {
			getServiceDay.current = event.detail.current;
		}
	});

	//获取服务评价
	const getComment = reactive<any>({
		number: 0,
		list: [],
		getList: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/order/assess/page`,
				data: {
					page: 1,
					limit: 6,
					studioId: getStudio.studioId
				}
			});
			getComment.list = res.data.records;
			getComment.list.map(item => {
				item.nickName = item.ifAnonymous ? item.nickName : item.nickName.slice(0, 1) + '**'
			})
			getComment.number = res.data.total;
		},
		toEvaluate: () => {
			console.log();
			uni.navigateTo({
				url: `/pages/studio/serviceEvaluation/index?studioId=${getStudio.studioId}`
			});
		}
	});


	//分享
	onShareAppMessage(() => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=2`;
		return {
			title: getStudio.detail.name,
			path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
			imageUrl: getStudio.detail.avatar
		};
	});
	const shareApp = async () => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=2`;
		const res : any = await api({
			method: 'POST',
			url: `/mall/user/v2/generateWxUrlLink`,
			data: {
				path: '/pages/shareRefereeId/index',
				query: `q=${encodeURIComponent(cans)}`,
				envVersion: configs.envVersion
			}
		});
		uni.shareWithSystem({
			summary: '',
			href: res.data,
			success() {
				// 分享完成，请注意此时不一定是成功分享
			},
			fail() {
				// 分享失败
			}
		});
	};
	//电话咨询
	const handleContact = async (item) => {
		// #ifdef APP
		const status = await accredit('CALL_PHONE')
		if (status != 1) return
		// #endif
		if (!item) {
			uni.showToast({
				icon: 'none',
				title: '暂未设置咨询电话'
			});
			return;
		}
		uni.makePhoneCall({
			phoneNumber: item
		});
	};
	//预约下单
	const toYuyue = () => {
		tab.change(
			{
				name: '服务',
				type: 'service',
				id: 1
			},
			0
		);
	};
	//在线咨询
	const onlineConsultation = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/petsitter-team/getManager?studioId=${getStudio.studioId}`
		});
		console.log(res.data)
		if (res.data) {
			uni.navigateTo({
				url: `/pages/im/message/index?id=${res.data.id}&username=${res.data.nickName}&avatar=${res.data.avatar}`
			});
		}

	};
	defineExpose({ init })
</script>

<style lang="scss" scoped>
	.second-home {}

	.covor-btn-right {
		right: -70rpx !important;
	}

	.covor-btn {
		position: fixed;
		right: 16rpx;
		top: 20vh;
		z-index: 20;
		background-color: rgba(255, 255, 255, 0.8);
		border: 4rpx solid #fff;
		border-radius: 50rpx;
		width: 112rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		transition: all 0.3s linear;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.line {
			width: 24rpx;
			height: 2rpx;
			background-color: #e7dddd;
			margin: 30rpx 0;
		}

		.share {
			position: absolute;
			top: 30rpx;
			width: 112rpx;
			height: 100rpx;
			opacity: 0;
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;

		.popup-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: 500;

			.close-icon {
				font-size: 48rpx;
				color: #999;
				line-height: 1;
			}
		}

		.html {
			max-height: 70vh;
			overflow-y: scroll;
			font-size: 26rpx;
			color: #7c807f;
			line-height: 1.6;
		}
	}

	.home-top {
		position: relative;
		height: 682rpx;
		transition: all 0.3s;

		.home-swiper-box {
			width: 750rpx;
			height: 562rpx;

			.item-img-box {
				overflow: hidden;

				>image {
					width: 750rpx;
					height: 562rpx;
				}
			}
		}

		.home-info {
			position: absolute;
			left: 32rpx;
			bottom: 0;
			width: calc(100% - 64rpx);

			.home-info-user {
				display: flex;
				align-items: center;
				padding: 20rpx 32rpx 30rpx;
				box-sizing: border-box;
				border-radius: 24rpx 24rpx 0 0;
				background-color: #fff;

				.avatar {
					width: 144rpx;
					height: 144rpx;
					border-radius: 24rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
					margin-top: -48rpx;
				}

				.user-info {
					flex: 1;

					.name {
						font-size: 40rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 16rpx;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;

						.tag {
							height: 38rpx;
							margin-right: 8rpx;
							will-change: transform;
						}

						// .tag {
						// 	font-size: 22rpx;
						// 	color: var(--color-primary);
						// 	border: 1rpx solid var(--color-primary);
						// 	padding: 4rpx 12rpx;
						// 	border-radius: 8rpx;
						// 	margin-right: 8rpx;
						// }
					}
				}
			}

			.tips {
				padding: 0 32rpx 32rpx;
				background-color: #fff;
				border-radius: 0 0 24rpx 24rpx;

				>view {
					padding-top: 32rpx;
					font-size: 26rpx;
					color: #7c807f;
					border-top: 1rpx solid #e8d8dd;
					line-height: 1.6;
				}
			}
		}
	}

	.home-tab {
		position: sticky;
		top: 0;
		border-radius: 24rpx;
		padding: 28rpx 32rpx 36rpx;
		background-color: var(--pages-bg-color);
		z-index: 10;

		.tab-container {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.tab-item {
				position: relative;
				font-size: 30rpx;
				color: #5c5e5e;
				display: flex;
				flex-direction: column;
				align-items: center;

				&.active {
					font-weight: 500;
					position: relative;

					.active-line {
						opacity: 1 !important;
					}

					.active-text {
						font-size: 40rpx !important;
						color: #1b2120 !important;
					}

					.line {
						position: absolute;
						left: 50%;
						margin-left: -20rpx;
						bottom: -25rpx;
						opacity: 0;
						transition: all 0.1s linear;

						>image {
							width: 40rpx;
							height: 14rpx;
						}
					}
				}
			}
		}
	}

	.tab-sevice {
		margin: 0 32rpx;

		.jiazheng {
			width: 100%;
		}

		.service-list {
			.service-item {
				display: flex;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 32rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.service-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
					flex-shrink: 0;
				}

				.service-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.service-title {
						font-size: 32rpx;
						font-weight: 500;
						color: #1b2120;
						margin-bottom: 12rpx;
					}

					.service-desc {
						font-size: 26rpx;
						color: #5c5e5e;
						margin-bottom: 24rpx;
					}

					.service-price {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.service-btn {
							width: 136rpx;
							height: 64rpx;
							font-size: 26rpx;
						}

						.price {
							font-size: 30rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}


	// 标题
	.title-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 64rpx 32rpx 24rpx;

		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333;

			.count {
				font-size: 28rpx;
				color: #8e8c8c;
				font-weight: normal;
				margin-left: 8rpx;
			}
		}

		.view-all {
			font-size: 26rpx;
			color: #5c5e5e;
		}
	}

	.tab-pcs {
		margin: 0 32rpx;

		.pcs-banner {
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.banner-img {
				width: 100%;
				display: block;
			}
		}

		.pcs-list {
			display: flex;
			// justify-content: space-between;
			flex-wrap: nowrap;
			overflow-x: scroll;

			.pcs-item {
				width: 268rpx;
				height: 334rpx;
				background-color: #fff;
				border-radius: 24rpx;
				overflow: hidden;
				padding: 0 24rpx;
				margin-right: 16rpx;
				flex-shrink: 0;
				box-sizing: border-box;

				.pcs-avatar {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
					margin: 32rpx auto 0;
					display: block;
				}

				.pcs-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #1b2120;
					margin: 24rpx 0;
					text-align: center;
				}

				.pcs-desc {
					font-size: 24rpx;
					color: #808080;
				}
			}
		}
	}

	.tab-daily {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		overflow: hidden;

		.swiper {
			height: 524rpx;

			.swiper-item {
				width: 400rpx;
				height: 524rpx;
				border-radius: 24rpx;
				overflow: hidden;
				background-color: #fff;

				.daily-img {
					width: 400rpx;
					height: 400rpx;
				}

				.daily-intro {
					padding: 16rpx 24rpx 24rpx;
					box-sizing: border-box;
					color: #1b2120;
					font-size: 28rpx;
				}
			}
		}

		.dots-content {
			width: 100%;
			text-align: center;

			.dots-item-active {
				width: 32rpx !important;
				height: 8rpx !important;
				background: var(--color-primary) !important;
				border-radius: 200rpx 200rpx 200rpx 200rpx !important;
			}

			.dots-item {
				display: inline-block;
				margin: 0 8rpx;
				width: 8rpx;
				height: 8rpx;
				background: #cccccc;
				border-radius: 50%;
				transition: all 0.25s linear;
			}
		}
	}

	.tab-comment {
		margin: 0 32rpx;

		.comment-card {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 32rpx;

			.comment-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.user-info {
					display: flex;
					align-items: center;

					.avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.user-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						margin-right: 16rpx;
						margin-bottom: 4rpx;
						width: 350rpx;
					}

					.rating {
						display: flex;

						.star {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}
					}
				}

				.comment-date {
					font-size: 26rpx;
					color: #7c807f;
				}
			}

			.comment-content {
				.service-info {
					font-size: 24rpx;
					color: #7c807f;
					margin-bottom: 16rpx;
				}

				.comment-text {
					font-size: 30rpx;
					color: #1b2120;
					line-height: 1.6;
				}
			}
		}
	}
</style>